<template>
    <div>
        <!-- 弹出层 -->
        <a-modal title="编辑学生信息" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed">
            <!-- labelCol定义 表单中左侧标题的一个宽度 -->
            <a-form :labelCol="{ span: 4 }">
                <a-form-item label="头像">
                    <div class="avatar-item">
                        <div class="av
                        atar-item-img"></div>
                        <!-- <img :src="formData.avatar" style="height: 60px; width: 60px;" alt=""> -->
                        <upload @uploadUrl="getSuccessUploadUrl" />
                    </div>
                </a-form-item>
                <a-form-item label="学号" name="stuNo">
                    <a-input disabled v-model:value="formData.stuNo" placeholder="请输入学号"></a-input>
                </a-form-item>
                <a-form-item label="学生姓名" name="stuName" v-bind="form.validateInfos.stuName">
                    <a-input v-model:value="formData.stuName" placeholder="请输入姓名"></a-input>
                </a-form-item>
                <a-form-item label="班级号" name="className" v-bind="form.validateInfos.className">
                    <a-input v-model:value="formData.className" placeholder="请输入班级号"></a-input>
                </a-form-item>
                <a-form-item label="手机号" name="tel" v-bind="form.validateInfos.tel">
                    <a-input v-model:value="formData.tel" placeholder="请输入手机号"></a-input>
                </a-form-item>
                <a-form-item label="入学时间" name="createAt">
                    <a-input disabled v-model:value="formData.createdAt"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import type { IStudent } from '@/types/user'
import dayjs from 'dayjs'
import { Form, message } from 'ant-design-vue'

// 父子组件通信 父：v-model:showDialog="showDialog"
// 子： emits('update:showDialog','传给父组件的值')

// Props是单向数据流只能在父组件修改，不能在子组件修改
const { showDetail, id } = defineProps<{
    showDetail: boolean,
    id: number
}>()

// 得到一个事件触发器
const emits = defineEmits<{
    (e: 'update:showDetail', val: Boolean): void,
    (e: 'addSuccess'): void,
}>()
let formData = reactive<IStudent>({})


const showDialogComputed = computed({
    get() {
        return showDetail  // 读取Props传来的值
    },
    set(val) {
        // val 是需要从父组件去入手修改 子传父
        emits('update:showDetail', val) // 告诉父组件 去修改showDialog的值
    }
})

watch([() => showDetail, () => id], async () => {
    if (showDetail && id) {
        const res = await findByIdStudent(id)
        formData.id = res.data.student.id
        formData.avatar = res.data.student.avatar
        formData.stuNo = res.data.student.stuNo
        formData.stuName = res.data.student.stuName
        formData.className = res.data.student.className
        formData.tel = res.data.student.tel
        formData.password = res.data.student.password
        formData.createdAt = dayjs(res.data.student.stuNo).format('YYYY-MM-DD')
    }
})


const btnCancel = () => {
    form.resetFields() // 清除数据 并且清除校验
}

const btnOk = async () => {
    await form.validate()
    // 到此不证明校验通过
    const res = await updatedStudent(formData)
    // 校验通知
    res.code === 201 ? message.success('更新成功') : message.error('更新失败'),

        btnCancel(),

        // 关闭弹层
        showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('addSuccess')
}

// 校验规则
const rules = reactive({
    stuName: [
        { required: true, message: '学生姓名不能为空', trigger: 'blur' },
        { min: 1, max: 4, message: '学生姓名1-4位' }
    ],
    tel: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
        }
    ],
    className: [{ required: true, message: '班级号不能为空', trigger: 'blur' }]
})

// 引入antd的From下的useForm方法把校验规则绑定在formData.value上
const form = Form.useForm(formData, rules)

const uploadAvatarImage = ref<string>('')

const getSuccessUploadUrl = (url:string) => {
    formData.avatar = url
}

</script>


<style scoped lang="less">
.upload {
    margin-left: 20px;
}

.avatar-item {
    display: flex;
}
</style>